<template>
    <div id="updateCourse" class="flex-center">
        <div class="dialog-container" style="-webkit-app-region: no-drag;">
            <div class="update-version">
                <div class="version-content">课程资源更新</div>
                <!-- <img src="./img/update.png" alt=""> -->
            </div>
            <div class="message align-center">
                <div class="courseNum flex-between">
                    <span class="s-14 t-color-n">发现以下课程资源有更新:</span>
                    <div class="flex-center">
                        <div class="dot pointer" :class="{active:active===index}"
                            v-for="(item, index) in updateResource.length" :key="index" @click="switchLesson(index)">
                        </div>
                    </div>
                </div>
                <div class="img-container">
                    <img src="./img/new.png" alt="" class="new">
                    <img :src="updateResource[active].src" alt="">
                </div>
                <div class="s-20" style="font-weight:600">
                    {{updateResource[active].title}}
                </div>
            </div>
            <div class="btn flex-center">
                <button @click="confirm" class="dis-button s-15">立即更新</button>
                <button @click="cancel" class="dis-button s-15">取消</button>
            </div>
            <img class="close pointer" src="./img/update-close.png" alt="" @click="cancel">
        </div>
    </div>
</template>

<script>
export default {
    props: ["updateResource"],
    inject: ["resetLessons"],
    data () {
        return {
            active: 0,
            confirmClick: false
        }
    },
    methods: {
        switchLesson (index) {
            this.active = index
        },
        confirm () {
            if (!this.confirmClick) {
                this.confirmClick = true;
                let lessonIds = [];
                this.updateResource.forEach(resource => {
                    lessonIds.push(resource.id);
                });
                this.resetLessons(lessonIds);
                this.$emit("closeUpdateDialog");
            }
        },
        cancel () {
            this.$emit("closeUpdateDialog");
        }
    }
}
</script>

<style lang="scss">
#updateCourse {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.7);
    .dialog-container {
        background-color: #fff;
        width: 440px;
        border-radius: 8px;
        // overflow: hidden;
        position: relative;
        .update-version {
            overflow: hidden;
            width: 100%;
            background-image: url(./img/UpdateCourse.png);
            background-size: 100% 100%;
            height: 94px;
        }
        .version-content {
            font-size: 24px;
            color: #fff;
            margin-top: 23px;
            margin-left: 35px;
        }
        .message {
            padding: 0 37px;
            .courseNum {
                width: 100%;
                margin-top: 24px;
            }
            .dot {
                width: 8px;
                height: 8px;
                background: rgba(228, 236, 247, 1);
                border-radius: 4px;
                &:nth-child(2) {
                    margin: 0 5px;
                }
            }
            .active {
                background-color: #4893ff;
            }
            .img-container {
                width: 367px;
                height: 203px;
                border-radius: 8px;
                margin: 20px 0;
                overflow: hidden;
                position: relative;
                img {
                    width: 100%;
                    height: 100%;
                }
                .new {
                    position: absolute;
                    top: -2px;
                    left: 20px;
                    width: 31px;
                    height: 37px;
                }
            }
        }
        .btn {
            margin-bottom: 16px;
            button {
                width: 80px;
                height: 36px;
                margin-top: 34px;
                margin-bottom: 16px;
            }
            button:nth-child(1) {
                color: #fff;
                background-color: #4894ff;
                margin-right: 14px;
            }
            button:nth-child(2) {
                color: #606266;
                background-color: #fff;
                border: 1px solid rgba(222, 222, 231, 1);
            }
        }
        .close {
            width: 14px;
            height: 14px;
            position: absolute;
            right: 14px;
            top: 14px;
        }
    }
}
</style>
